<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>环广西自行车大赛</title>
    <link rel="stylesheet" href="./index.css">
    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
</head>

<body>
    <div class="wrapper">
        <!--菜单栏-->
        <nav class="navbar">
            <div class="navitem btn">
                <img src="imgs/navicon1.png" style="display:none;" />
                <img src="imgs/navicon11.png" />
                <h5 style="color:#59c2e6;">首页</h5>
            </div>
            <div class="navitem btn">
                <img src="imgs/navicon2.png" />
                <img src="imgs/navicon22.png" style="display:none;" />
                <h5>活动简介</h5>
            </div>
            <div class="navitem submititem">
                <div class="navicon">
                    +
                </div>
                <h5>报名</h5>
            </div>
            <div class="navitem">
                <img src="imgs/navicon3.png" />
                <h5>赛事资讯</h5>
            </div>
            <div class="navitem btn">
                <img src="imgs/navicon4.png" />
                <img src="imgs/navicon44.png" style="display:none;" />
                <h5>我的</h5>
            </div>
        </nav>
        <!--首页-->
        <div class="stage1 stage">
            <!--头部-->
            <div class="banner">
                <img src="./imgs/banner.jpg">
            </div>
            <!--时间展示-->
            <div class="infobar">
                <div class="toparea">距离活动结束还有</div>
                <div class="bottomarea"><span>30</span>天<span>1</span>小时<span>50</span>分<span>33</span>秒</div>
            </div>
            <!--搜索页-->
            <div class="searchbar">
                <input class="searcharea" type="text" placeholder="输入编号搜索">
                <img class="searchicon" src="./imgs/zoom.png" />
            </div>
            <!--选择按钮-->
            <div class="choosebar">
                <div class="leftarea"><a href="javascript:void">热门</a></div>
                <div class="rightarea"><a href="javascript:void">最新</a></div>
            </div>
            <!--内容展示-->
            <div class="contentbar">
                <div class="leftarea">
                    <a href="#" class="contentitem">
                        <img src="./imgs/1.png" class="contentimg" />
                        <div class="userinfo">
                            <img class="usericon" src="./imgs/1.png">
                            <span class="username">局局女孩</span>
                            <span class="userid">001</span>
                        </div>
                    </a>
                    <a href="#" class="contentitem">
                        <img src="./imgs/2.png" class="contentimg" />
                        <div class="userinfo">
                            <img class="usericon" src="./imgs/2.png">
                            <span class="username">局局女孩</span>
                            <span class="userid">001</span>
                        </div>
                    </a>
                    <a href="#" class="contentitem">
                        <img src="./imgs/1.png" class="contentimg" />
                        <div class="userinfo">
                            <img class="usericon" src="./imgs/1.png">
                            <span class="username">局局女孩</span>
                            <span class="userid">001</span>
                        </div>
                    </a>
                    <a href="#" class="contentitem">
                        <img src="./imgs/2.png" class="contentimg" />
                        <div class="userinfo">
                            <img class="usericon" src="./imgs/2.png">
                            <span class="username">局局女孩</span>
                            <span class="userid">001</span>
                        </div>
                    </a>
                    <a href="#" class="contentitem">
                        <img src="./imgs/1.png" class="contentimg" />
                        <div class="userinfo">
                            <img class="usericon" src="./imgs/1.png">
                            <span class="username">局局女孩</span>
                            <span class="userid">001</span>
                        </div>
                    </a>
                </div>
                <div class="rightarea">
                    <a href="#" class="contentitem">
                        <img src="./imgs/2.png" class="contentimg" />
                        <div class="userinfo">
                            <img class="usericon" src="./imgs/2.png">
                            <span class="username">局局女孩</span>
                            <span class="userid">001</span>
                        </div>
                    </a>
                    <a href="#" class="contentitem">
                        <img src="./imgs/1.png" class="contentimg" />
                        <div class="userinfo">
                            <img class="usericon" src="./imgs/1.png">
                            <span class="username">局局女孩</span>
                            <span class="userid">001</span>
                        </div>
                    </a>
                    <a href="#" class="contentitem">
                        <img src="./imgs/2.png" class="contentimg" />
                        <div class="userinfo">
                            <img class="usericon" src="./imgs/2.png">
                            <span class="username">局局女孩</span>
                            <span class="userid">001</span>
                        </div>
                    </a>
                    <a href="#" class="contentitem">
                        <img src="./imgs/1.png" class="contentimg" />
                        <div class="userinfo">
                            <img class="usericon" src="./imgs/1.png">
                            <span class="username">局局女孩</span>
                            <span class="userid">001</span>
                        </div>
                    </a>
                    <a href="#" class="contentitem">
                        <img src="./imgs/2.png" class="contentimg" />
                        <div class="userinfo">
                            <img class="usericon" src="./imgs/2.png">
                            <span class="username">局局女孩</span>
                            <span class="userid">001</span>
                        </div>
                    </a>
                </div>
            </div>
            <!--分页按钮-->
            <div class="pagebar">
                <a class="leftarrow" href="javascript:void">&lt;</a>
                <a href="javascript:void" class="active">1</a>
                <a href="javascript:void">2</a>
                <a href="javascript:void">3</a>
                <a href="javascript:void">4</a>
                <a href="javascript:void">5</a>
                <a class="rightarrow" href="javascript:void">&gt;</a>
            </div>
            <!--出品处-->
            <div class="copyrightbar">
                南国早报新媒体中心&nbsp;&nbsp;出品
            </div>

        </div>
        <!--活动简介-->
        <div class="stage2 stage" style="display:none;">
            <div class="showbox">
                <img class="closebtn" src="imgs/close.png" />
                <div class="pbox">
                    <p>新媒体时代人人都是摄影师，人人都是大导演，目前抖音与微信小视频火爆，在各大平台上人气十足，活动旨在南国早报全媒体平台广泛宣传，鼓励群众参与“全民助威环广西手机摄影大赛”，将广大市民手机拍摄的、与环广西相关的视频进行征集、评选、广泛传播，以次为2018年“环广西”国际公路自行车巡回赛造势，体现“环广西”的跨界融合，以别具一格的短视频大赛，吸引社会各界的关注。</p>

                    <p class="p2"> 活动时间：<br/>2018年8月-2018年10月
                    </p>
                    <p class="p2">活动主题：<br/>助威“环广西”，我是“大导演”
                    </p>
                    <p class="p2">征集标准：<br/> 1．手机短视频，长度10秒左右，与朋友圈小视频的长度一致，可以是首届赛事的小视频，可以是赛段沿线的山水风光，可以是车友们在赛道上的自拍，也可以是日常生活中与自行车相关的任意运动主题。
                        <br/>2.必须有“环广西”公路自行车赛的相关元素露出，如镜头中出现赛事专属LOGO，或者视频中呼喊助威“环广西”的口号。 活动流程： 活动分征集和海选、决选三个步骤，利用南国早报全媒体平台、广西日报，广西新闻网、广西电台、广西电视台等主流媒体，进行区内外的广泛征集。
                        征集：通过南国早报微信公众号发布征集令（具体几期待定），号召广大网友参与短视频大赛，征集当中包含示范短视频1-2个（有劳新媒体的小伙伴们拍摄），风格以亲民活泼简易为主。
                    </p>
                </div>
            </div>
        </div>
        <!--我的-->
        <div class="stage3 stage" style="display:none;">
            <div class="header">用户</div>
            <div class="userinfo">
                <img class="usericon" src="imgs/1.png">
                <div class="usertxt">
                    <div class="username">聚聚女孩</div>
                    <div class="userid">编号ID : <span>001</span></div>
                </div>
            </div>
            <div class="usercontent">
                <h3>我眼中的环广西</h3>
                <video poster="imgs/1.png" src="#" controls></video>
                <p>
                    新媒体时代人人都是摄影师，人人都是大导演，目前抖音与微信小视频火爆，在各大平台上人气十足，活动旨在南国早报全媒体平台广泛宣传，鼓励群众参与“全民助威环广西手机摄影大赛”，将广大市民手机拍摄的、与环广西相关的视频进行征集、评选、广泛传播。
                </p>
            </div>

        </div>
        <!--报名-->
        <div class="stage4 stage" style="display:none;">
            <div class="header">参加/报名</div>
            <form action="#">
                <input type="text" placeholder="作品名称" />
                <input type="text" placeholder="姓名" />
                <input type="number" placeholder="电话（联系用，不公开）" />
                <textarea name="" id="" cols="10" rows="4" placeholder="作品介绍（限200字以内）"></textarea>
                <div class="fileshow">
                    <div class="getvideo"><label for="getvideo">
                            <h3>+</h3>
                            <p>上传视频</p>
                        </label></div>
                    <div class="showvideo">
                        <img class="showimg" src="imgs/1.png">
                        <img class="close" src="imgs/close2.png">
                    </div>
                    <div class="getposter"><label for="getposter">
                            <h3>+</h3>
                            <p>上传视频封面</p>
                        </label></div>
                    <div class="showposter">
                        <img class="showimg" src="imgs/1.png">
                        <img class="close" src="imgs/close2.png">
                    </div>
                </div>
                <div class="submitbtn">
                    <div class="btn1">提交</div>
                    <div class="btn2">取消</div>
                </div>
                <div class="infomation">
                    <p>注：1、视频不能大于10m，时长不能超过30秒。</p>
                    <p>2、一个微信账号只能上传一个视频。</p>
                    <p>3、上传视频封面图，为你的视频获得更多关注。</p>
                </div>
                <input type="file" id="getvideo" style="visibility: hidden;" />
                <input type="file" id="getposter" style="visibility: hidden;" />
            </form>
            <div class="loading">
                <div style="text-align:center;">
                <h3>上传中</h3>
                <div class="anim">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            </div>
        </div>
    </div>

    <script src="./index.js"></script>
</body>

</html>